<template>
  <div class="form-div">
    <div style="height: 70px; display: inline-block; width: 80%">
      <div class="row">
        <div class="row-div">
          <SelectOrg
            v-model="form.salesOrganization"
            class="row-input"
            @input="handleOrgChange"
          />
          <span class="row-span">销售组织</span>
        </div>
        <div class="row-div">
          <SelectOrg
            v-model="form.salesGroup"
            :has-default="false"
            class="row-input"
            :parent-id="parentId"
            :options="orgGroupOptions"
          />
          <span class="row-span">销售组</span>
        </div>
        <div style="width: 50%" class="row-div">
          <div class="row-div-div" style="width: 80%">
            <MonthRangPicker
              :start.sync="form.startTime"
              :end.sync="form.endTime"
            />
          </div>
          <span class="row-span"> 变更年月 </span>
        </div>
      </div>
      <div class="row">
        <div class="row-div">
          <SelectDefault
            v-model="form.currStatus"
            class="row-input"
            code="state"
          />
          <span class="row-span">当前状态</span>
        </div>
        <div class="row-div">
          <SelectDefault
            v-model="form.nodeCode"
            code="price_node"
            class="row-input"
          />
          <span class="row-span"> 当前节点 </span>
        </div>
        <div style="width: 50%" class="row-div">
          <p-input
            v-model="form.priceChangeDescribe"
            style="width: 80% !important"
            class="row-input"
          />
          <span class="row-span"> 价格变更简述 </span>
        </div>
      </div>
    </div>
    <div class="button-div">
      <div style="width: 44px; float: left">
        <p-button
          class="commonbutton"
          style="margin-bottom: 5px"
          type="primary"
          @click="searchTableList"
        >
          搜索
        </p-button>
        <p-button class="commonbutton" @click="resForm">重置</p-button>
      </div>
      <div style="margin-left: 42px; float: left">
        <p-button class="button" @click="exportExcel"> 导出 </p-button>
      </div>
    </div>
  </div>
</template>

<script>
import MonthRangPicker from '@/components/picker/MonthRangePicker.vue';
import { postOrganizationInfo } from '@/api/public.js';
import { downloadFile } from '@/utils/index.js';
import { postExportList } from '@/api/price.js';

const defaultForm = {
  currStatus: '',
  endTime: null,
  keyword: '',
  nodeCode: '',
  priceChangeDescribe: '',
  salesGroup: '',
  salesOrganization: '',
  startTime: null,
};
export default {
  components: {
    MonthRangPicker,
  },
  data() {
    return {
      form: {
        ...defaultForm,
      },
      parentId: '',
    };
  },
  computed: {
    orgGroupOptions() {
      return this.$store.getters.getOrg({
        code: this.parentId,
        type: 'sales',
        isDict: false,
      });
    },
  },
  watch: {},

  methods: {
    async searchTableList() {
      this.$emit('search');
    },
    handleOrgChange(val) {
      this.form.salesGroup = '';
      this.orgGroupOptions = [];
      this.parentId = val;
    },
    resForm() {
      this.form = { ...defaultForm };
      this.$emit('search');
    },
    async exportExcel() {
      const res = await postExportList(this.form);
      console.log('res: ', res);
      await downloadFile(res.data, res.filename || '价格明细.xls');
    },
  },
};
</script>

<style lang="less" scope>
.row {
  width: 100%;
  justify-content: space-around;
  display: flex;
  float: left;
  &-span {
    float: right;
    line-height: 35px;
    margin-right: 7px;
  }
  &-input {
    width: 70% !important;
    float: right;
  }
  &-div {
    width: 24%;
    height: 35px;
    &-div {
      height: 35px;
      float: right;
    }
  }
}
.button-div {
  width: 19%;
  float: right;
  height: 70px;
}
.button {
  height: 66px !important;
}
.form-div {
  padding: 10px 20px;
  width: 100%;
  background: #f7f7f8;
  // border: 1px solid #e5e6e9;
  margin-bottom: 10px;
}
.month-span {
  display: inline-block;
  width: 4%;
  text-align: center;
  font-weight: bold;
}
</style>
